<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>模板选择</span>
            </div>
            <el-main>
                <div v-for="(item,index) in form" :key="index" :class="{choose:item.installed==1 }"
                     class="grid grid-cols-3 border-2 my-2 py-2">
                    <div class="flex flex-col items-center justify-center"
                    >
                        <img :src="item.preview" alt="" class="w-32 h-32">
                        <div slot="header" class="clearfix">
                            <span>模板标题：{{ item.title }}</span>
                        </div>
                    </div>
                    <div class="flex flex-col items-start justify-center">
                        <span>模板名称：{{ item.name }}</span>
                        <span>模板作者：{{ item.author }}</span>
                        <span>模板描述：{{ item.description }}</span>
                        <span class="text-sm">创建时间：{{ item.created_at | dateFormat }}</span>
                        <span class="text-xs font-thin">版本号：{{ item.version }}</span>
                    </div>
                    <div class="flex flex-col items-center justify-center">
                        <el-button :disabled="item.installed==1" :type="item.installed==1?'danger':'info'"
                                   @click="onSubmit(item)">
                            <span v-if="item.installed==1">已选择</span>
                            <span v-else>选择</span>
                        </el-button>
                    </div>
                </div>
            </el-main>
        </el-card>
    </div>
</template>

<script>
import tabs from './tabs.js'

export default {
    route: {name: 'admin.template.index', meta: {title: '模板列表'}},
    data() {
        return {
            form: [],
            tabs
        }
    },
    async created() {
        this.form = await this.axios.get('admin/template')
    },
    methods: {
        async onSubmit(item) {
            await this.axios.post('admin/template/choose', {id: item.id})
            this.form = await this.axios.get('admin/template')
        }
    }
}
</script>

<style lang="scss" scoped>
.choose {
    background: #D1FAE5;
}
</style>

